<template>
    <div class="box" teleport="body">
        <h1>修改管理员信息</h1>
        <el-form :model="admin" label-width="120px" class="demo-admin">
            <el-form-item label="编号" label-width="120px">
                <span>{{ admin.adminid }}</span>
            </el-form-item>
            <el-form-item label="姓名">
                <span>{{ admin.adminname }}</span>
            </el-form-item>

            <el-form-item label="密码" prop="pass">
                <el-input v-model="admin.password" type="password" autocomplete="off" />
            </el-form-item>

            <el-form-item label="角色">
                <el-radio-group v-model="admin.role">
                    <el-radio :label="1">超级管理员</el-radio>
                    <el-radio :label="2">普通管理员</el-radio>
                </el-radio-group>
            </el-form-item>

            <p>
                <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" highlight-current />
            </p>

            <el-form-item>
                <el-button type="primary" @click="submitForm">修改</el-button>
                <el-button type="primary" @click="resetForm">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus';
import service from '../../../ulit/service';
import { menudata as data } from "../../../grants/menudata"
// 声明属性
const props = defineProps<{
    adminname: string
}>()
// 声明事件
const emit = defineEmits<{
    (e: "hide"): void,
    (e: "updatesuccess"): void
}>();

interface Iadmin {
    "adminname": string,
    "adminid": string,
    "password": string,
    "role": number//1:表示超级管理员，2：普通管理员
    "checkedKeys": string[]
}
// 当前管理员的数据
const admin = reactive<Iadmin>({
    'adminid': '',
    'adminname': '',
    'password': '',
    'role': 1,
    'checkedKeys': []
})

// 获取管理员的信息：根据adminname进行获取
const getadmin = () => {
    service({
        url: "/admin/detail",
        params: {
            adminname: props.adminname
        }
    }).then(res => {
        if (res.data.code === '200') {
            admin.adminid = res.data.data[0].adminid
            admin.adminname = res.data.data[0].adminname
            admin.role = res.data.data[0].role
            admin.checkedKeys = res.data.data[0].checkedKeys;
        }
    })
}
watch(props, () => {
    getadmin()
    admin.password = ''
}, {
    deep: true
})

//修改
const submitForm = () => {
    service({
        url: "/admin/update",
        method: "post",
        data: {
            adminname: admin.adminname,
            password: admin.password,
            role: admin.role,
            checkedKeys: admin.checkedKeys
        }
    }).then(res => {
        if (res.data.code === '200') {
            ElMessage({
                message: "修改成功",
                type: "success"
            })
            emit('hide')//关掉自己
            emit('updatesuccess')
        }
    })
}
//取消
const resetForm = () => {
    // 触发隐藏事件
    emit('hide')
}

</script>

<style scoped>
.box {
    width: 500px;
    /* height: 400px; */
    border: 1px solid #e5e4e4;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* background-color: skyblue; */
    background-image: url(../../../assets/2.jpg);
    background-size: 500px 400px;
    z-index: 5;
}

.el-tree {
    background: rgba(0, 0, 0, 0);
    width: 300px;
    margin-left: 150px;
}
</style>